<template>
  <CommonCard title="今日订单" :value="orderToday  | numberFormat">
    <template>
      <v-chart :option="getoption()" autoresize> </v-chart>
    </template>
    <template #bottom>
        <span>昨日订单量</span>
        <span class="number">{{orderLastDay | numberFormat}}</span>
    </template>
  </CommonCard>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TodayOrders",
  computed: {
    ...mapState({
      orderToday: (state) => state.data.reportData.orderToday, // 今日订单量
      orderLastDay: (state) => state.data.reportData.orderLastDay, // 昨日订单量
      orderTrend: (state) => state.data.reportData.orderTrend || [], // 实时的订单数
      orderTrendAxis: (state) => state.data.reportData.orderTrendAxis || [], // 时间
    }),
  },
  methods: {
    getoption() {
      return {
        xAxis: {
          show: false,
          boundaryGap: false, // 是否留白
          data: this.orderTrendAxis,
        },
        yAxis: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        series: {
          name: "实时订单数",
          type: "line",
          data: this.orderTrend,
          smooth: true,
          areaStyle: {
            color: "skyblue",
          },
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
        },

        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
